import React, { PureComponent } from 'react';
import _ from 'lodash';
import { PrimaryGhostC, FirstHeaderC, PrimaryC, FixedButtonC } from '../../../comps';
import { connect } from 'dva';
import shareOptionStyle from './shareOptionStyle.less';
import LeftTitle from './components/LeftTitle';
import OptionContent from './components/OptionContent';
@connect(({ shareOptionManageM, bookM }) => ({ shareOptionManageM, bookM }))
export default class ShareOption extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() {
    const { type, bundleId } = this.props;
    this.props.onRef && this.props.onRef(this);
    this.initPage({ type, bundleId });
  }
  componentWillUnmount() {
    this.props.dispatch({
      type: 'bookM/save',
      payload: {
        onlyView: false,
        mapData: [],
      },
    });
  }
  // 初始话页面数据type：1-新增  2-复用 3-编辑
  /**
   *
   * @param {*type：1-新增  2-复用 3-编辑} type  必填
   * @param {*string} bundleId  非必填
   */
  initPage = ({ type, bundleId }) => {
    const {
      dispatch,
      bookM: { mapData },
    } = this.props;
    dispatch({
      type: 'bookM/save',
      payload: {
        onlyView: type === '4' ? true : false,
      },
    });

    dispatch({
      type: 'bookM/save',
      payload: {
        pageIsChange: false,
        titleOpen: {
          isOpen1: true, //基础期权信息标题是否展开
          isOpen2: false, //香草期权标题是否展开
          isOpen3: false, //障碍期权标题是否展开
          isOpen4: false, //二元期权标题是否展开
          isOpen7: false, //雪球期权标题是否展开
        },
      },
    });
    if (type == '1') {
      dispatch({
        type: 'bookM/save',
        payload: {
          mapData: [
            {
              bundleId: '',
              structure: '', // 期权结构
              info: [
                {
                  structure: '', // 期权结构
                  bookMain: {}, //基础期权
                  bookBarrier: {}, // 障碍期权
                  bookDual: {}, //  二元期权
                  bookVanilla: {}, // 香草期权
                  bookSnowball: {}, //雪球期权
                },
              ],
              key: 0,
            },
          ],
        },
      });
    } else {
      dispatch({
        type: 'bookM/getBookData',
        payload: {
          bundleId,
        },
        callback: (status, data) => {
          if (status == 'success') {
            let newbook = {
              bundleId: '',
              structure: data.structure,
              info: data.info,
              key: 0,
            };
            if (type === '2') {
              let dataInfo = _.cloneDeep(data.info);

              let _info = [];
              if (dataInfo.length > 0) {
                // 交易编号和合约编辑不回填
                _info = dataInfo.map((element) => {
                  let ele = {};
                  ele.bookMain = element.bookMain ? element.bookMain : {};
                  ele.bookBarrier = element.bookBarrier ? element.bookBarrier : {};
                  ele.bookDual = element.bookDual ? element.bookDual : {};
                  ele.bookVanilla = element.bookVanilla ? element.bookVanilla : {};
                  ele.bookSnowball = element.bookSnowball ? element.bookSnowball : {};
                  // ele.bookMain.tradeId = undefined
                  ele.bookMain.contractId = undefined;
                  ele.bookMain.bookId = undefined;
                  ele.bookMain.insertTime = undefined;
                  ele.bookMain.id = undefined;
                  return ele;
                });
                newbook.info = _info;
              } else {
                newbook.info = [
                  {
                    structure: '', // 期权结构
                    bookMain: {}, //基础期权
                    bookBarrier: {}, // 障碍期权
                    bookDual: {}, //  二元期权
                    bookVanilla: {}, // 香草期权
                    bookSnowball: {}, //雪球期权
                  },
                ];
              }
            } else {
              // 编辑
              newbook.bundleId = bundleId;
              let dataInfo = _.cloneDeep(data.info);

              let _info = [];
              if (dataInfo.length > 0) {
                // 交易编号和合约编辑不回填
                _info = dataInfo.map((element) => {
                  let ele = {};
                  ele.bookMain = element.bookMain ? element.bookMain : {};
                  ele.bookBarrier = element.bookBarrier ? element.bookBarrier : {};
                  ele.bookDual = element.bookDual ? element.bookDual : {};
                  ele.bookVanilla = element.bookVanilla ? element.bookVanilla : {};
                  ele.bookSnowball = element.bookSnowball ? element.bookSnowball : {};
                  return ele;
                });
                newbook.info = _info;
              } else {
                newbook.info = [
                  {
                    structure: '', // 期权结构
                    bookMain: {}, //基础期权
                    bookBarrier: {}, // 障碍期权
                    bookDual: {}, //  二元期权
                    bookVanilla: {}, // 香草期权
                    bookSnowball: {}, //雪球期权
                  },
                ];
              }
            }
            let tempArr = [newbook];
            dispatch({
              type: 'bookM/save',
              payload: {
                mapData: tempArr,
              },
            });
          }
        },
      });
    }
  };

  onBack = () => {
    // onBack事件：当点击“返回”按钮时，抛出该事件，父组件响应该事件，返回列表页（参数为isRefresh，父组件根据该参数，执行列表刷新或不刷新操作）。
    const {
      bookM: { pageIsChange },
    } = this.props;
    this.props.onBack(pageIsChange);
    this.props.showShareOption(false);
    this.props.dispatch({
      type: 'bookM/save',
      payload: {
        mapData: [],
      },
    });
  };
  // 添加期权结构按钮
  addOptionStruct = () => {};
  // 添加簿记
  addBook = () => {
    const {
      bookM: { mapData },
      dispatch,
    } = this.props;
    let data = _.cloneDeep(mapData);
    const newbook = {
      bundleId: undefined,
      structure: '',
      info: [
        {
          bookMain: {}, //基础期权
          bookBarrier: {}, // 障碍期权
          bookDual: {}, //  二元期权
          bookVanilla: {}, // 香草期权
          bookSnowball: {}, //雪球期权
        },
      ],
    };
    data.push(newbook);
    const newData = data.map((ele, index) => {
      return { ...ele, key: index };
    });
    dispatch({
      type: 'bookM/save',
      payload: { mapData: newData },
    });
  };
  render() {
    const {
      bookM: { onlyView },
      type,
    } = this.props;
    return (
      <div>
        <FixedButtonC
          topHtml={
            <>
              <FirstHeaderC title='场外期权簿记' />
              {onlyView ? (
                ''
              ) : (
                <div className={shareOptionStyle.btnDiv}>
                  <PrimaryC title='添加期权结构' onClick={this.addOptionStruct} />
                  <PrimaryC title='添加簿记' onClick={this.addBook} />
                </div>
              )}
              <div style={{ width: '100%', display: 'flex', justifyContent: 'flex-start' }}>
                <div className={shareOptionStyle.leftTitle}>
                  <LeftTitle />
                </div>
                <div className={shareOptionStyle.rightCon}>
                  <OptionContent type={type} />
                </div>
              </div>
            </>
          }
          bottomHtml={
            <div className={shareOptionStyle.back}>
              <PrimaryGhostC title='返回' onClick={this.onBack} />
            </div>
          }
        ></FixedButtonC>
      </div>
    );
  }
}
